import React from "react"
import useSafeState from "../../hooks/useSafeState.ts"
import { useEffect, useState } from "react"

const ChildOne = () => {
  const [value, setValue] = useSafeState("")

  useEffect(() => {
    setTimeout(() => {
      setValue("Hello ChildOne")
    }, 5000)
  }, [])

  const text = value || "ChildOne Loading..."

  return (
    <div>
      <h1>ChileOne:{text}</h1>
    </div>
  )
}

const TryUseSafeState = () => {
  const [flag, setFlag] = useState(true)

  return (
    <div>
      <button className='bg-[#ccc] border' onClick={() => setFlag(false)}>
        点击卸载
      </button>
      {flag && <ChildOne />}
    </div>
  )
}

export default TryUseSafeState
